<template>
    <div class="homeBar">
        <ul>
            <li @click="tab1()">
                <img :src="'a'+itemindex1+'.png'">
                <span>首页</span>
            </li>
            <li @click="tab2()">
                <img :src="'b'+itemindex2+'.png'">
                <span>电商</span>
            </li>
            <li @click="tab3()">
                <img :src="'c'+itemindex3+'.png'">
                <span>消息</span>
            </li>
            <li @click="tab4()">
                <img :src="'d'+itemindex4+'.png'">
                <span>我的</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            itemindex1:0,
            itemindex2:0,
            itemindex3:0,
            itemindex4:0
        }
    },
    methods:{
        tab1(){
            this.itemindex1=1;
            this.itemindex2=0;
            this.itemindex3=0;
            this.itemindex4=0;
        },
        tab2(){
            this.itemindex1=0;
            this.itemindex2=1;
            this.itemindex3=0;
            this.itemindex4=0;
         },
        tab3(){
            this.itemindex1=0;
            this.itemindex2=0;
            this.itemindex3=1;
            this.itemindex4=0;
         },
        tab4(){
            this.itemindex1=0;
            this.itemindex2=0;
            this.itemindex3=0;
            this.itemindex4=1;
         },
    }
}
</script>

<style scoped>
  
    .homeBar{
        width: 100%;
        height: 0.76rem;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .homeBar ul{
        width: 100%;
        height: 0.76rem;
        background-color: #fcf6ef;
        border-top: 0.0625rem solid #f0eeed;
        display: flex;
    }
    .homeBar li{
        width:25%;
        flex: 1;
    }
    .homeBar img{
        width: 0.24rem;
        height: 0.24rem;
        display: block;
        margin: auto;
       
    }
    .homeBar span{
        display: block;
        font-size: 0.12rem;
        text-align: center;
    }
</style>